import React from 'react'
import View from 'lib/View.jsx'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import dispatcher from 'lib/dispatcher'
import RootScope from './RootScope.es6'
import tips from '../common/indicator-tips.jsx'
import ListTable from './ListTable.jsx'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import DropdownList from 'lib/components/DropdownList.jsx'

import _ from 'underscore'

export default class RootView extends View {
  constructor(props) {
    super(props);
  }

  deviceTypeChangeHandler(item) {
    dispatcher.dispatch({
      $type: 'change_device_type',
      deviceType: item.value
    });
  }

  render() {
    var ticks = new Date().getTime();
    return (
      <div>
        <div className="pure-g">
          <div className="pure-u-1 pure-u-lg-2-3">
            <div className="box">
              <Card title={
                <span>
                  卡顿趋势图
                  <i className="iconfont" data-tip={tips.framerate_chart0_desc}>&#xe663;</i>
                </span>
              } extra={
                addWidgetMixin(this.state.lineChartApi, '卡顿趋势图')
              }>
                <ChartWidget key={ticks} store={this.state.lineChart} />
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-lg-1-3">
            <div className="box">
              <Card title={
                <span>
                  <DropdownList
                    style={{width:'127px'}}
                    dropdownStyle={{minWidth:'127px'}}
                    list={this.state.pieListDataSource}
                    current={_.find(this.state.pieListDataSource, item => item.value === this.state.currentPieType)}
                    onChanging={this.deviceTypeChangeHandler.bind(this)} />
                  <i className="iconfont" data-tip={tips.framerate_distribution}>&#xe663;</i>
                </span>
              }>
                <ChartWidget
                  chartType="pie"
                  key={ticks+1}
                  store={this.state.pieChart}
                  tooltipFormat={this.state.pieChartFormatter}
                  chartSettings={this.state.pieChartSettings}
                />
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card title="卡顿页面">
                <ListTable key={ticks+2} store={this.state.list} />
              </Card>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

RootView.defaultProps = {
  Scope: RootScope
}
